<template>
    <div class="goods-info">
        <img id="goods-show-img0"
             :src="goods.Images[0]" />
        <div id="goods-show-detalis">
            <img id="goods-show-img1"
                 :src="goods.Images[1]" />
            <p id="goods-show-describe">{{goods.Describe}}</p>
        </div>
        <div id="goods-show-img-small">
            <img class="goods-show-img2"
                 :src="goods.Images[2]" />
            <img class="goods-show-img2"
                 :src="goods.Images[3]" />
            <img class="goods-show-img2"
                 :src="goods.Images[4]" />
        </div>
        <div id="goods-show-content">
            <h1>{{goods.GoodsName}}</h1>
            <span id="goods-show-price">￥{{goods.Price}}</span>
            <h4>颜色</h4>
            <span id="goods-show-color">详细请参考图片</span>
            <h4>尺码</h4>
            <span id="goods-show-color">详细请参考图片</span>
            <el-button type="primary"
                       size="large"
                       @click="dialogVisible = true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        </div>
        <el-dialog title="添加数量"
                   v-model="dialogVisible"
                   size="tiny">
            <el-input-number v-model="num"
                             :min="1"
                             :max="100"></el-input-number>
            <span slot="footer"
                  class="dialog-footer">
                                                                    <el-button @click="dialogVisible = false">关 闭</el-button>
                                                                    <el-button type="primary" @click="addGoods()">确 定</el-button>
                                                                  </span>
        </el-dialog>
    </div>
</template>
<style>
#goods-show-describe {
    font-weight: 900;
    font-size: 0.7em;
    word-wrap: break-word;
    word-break: break-all;
    max-width: 53%;
}

#goods-show-img0 {
    margin: 8% 5% 0% 8%;
    min-height: 450px;
    max-width: 650px;
}

#goods-show-detalis {
    position: absolute;
    display: inline-block;
    margin-top: 18%;
}

#goods-show-img1 {
    min-height: 350px;
    max-width: 350px;
}

#goods-show-img-small {
    margin-left: 13%;
}

.goods-show-img2 {
    display: inline-block;
    margin: 1% 2% 0% 1%;
    max-width: 350px;
    max-height: 400px;
}

#goods-show-content {
    position: absolute;
    top: 38%;
    left: 83%;
    min-width: 18%;
}

#goods-show-price {
    font-size: 1em;
    margin-top: -5%;
    margin-bottom: 20%;
    display: block;
}

#goods-show-color {
    display: block;
    margin-top: -5%;
    margin-bottom: 20%;
    font-size: 0.8em;
}
</style>
<script>
export default {

    data: function () {
        return {
            goods: {
                Images: []
            },
            dialogVisible: false,
            num: 1
        }
    },
    created: function () {
        var _this = this;
        var id = _this.$route.params.id;
        getgGoodsInfoById: {
            $.ajax({
                type: "GET",
                url: "/api/Goods/GetGoodsInfoByGoodsId",
                dataType: "json",
                data: {
                    "goodsId": id
                },
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    _this.goods = data;
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        }
    },
    methods: {
        addGoods() {
            if ($.cookie('front-token') == null) {
                window.location.href = 'http://localhost:60861/#/Login'
            } else {
                var _this = this;
                var token = JSON.parse($.cookie('front-token'));
                $.ajax({
                    type: "Put",
                    url: "/api/Goods/AddGoodsToCart",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    data: JSON.stringify({
                        userId: _this.$store.state.user.userId,
                        goodsId: _this.goods.GoodsId,
                        number: _this.num
                    }),
                    contentType: "application/json",
                    success: function (data) {
                        if (data == '添加成功') {
                            _this.addSuccess();
                            _this.dialogVisible = false;
                        } else {
                            _this.addFailed();
                            _this.dialogVisible = false;
                        }
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }
        },
        addSuccess() {
            this.$message({
                showClose: true,
                message: '添加成功',
                type: 'success'
            });
        },
        addFailed() {
            this.$message({
                showClose: true,
                message: '添加失败,库存不足',
                type: 'error'
            });
        }
    }
}
</script>